<template>
  <zm-body>
    <div class="app-lefter-bg" style="width:38rem"></div>
    <div class="overlay-container" v-loading="areaDataLoading">
      <zm-box4 title="部件分析">
        <div class="filter-header flex-center ">
          <el-form :inline="true" size="mini" :model="filterForm">
            <el-form-item label="">
              <el-select
                v-model="nfxz"
                style="width:150px"
                placeholder="南法信镇"
                class="mr10"
                @change="areaChangeHandler"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                  v-for="(item) in areaOptions"
                ></el-option>
              </el-select>
              <el-select
                v-model="filterForm.region"
                style="width:150px"
                placeholder=""
                class="mr10"
                @change="areaChangeHandler"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  :key="item.value"
                  v-for="(item) in countryOptions"
                ></el-option>
              </el-select>
<!--              <el-select-->
<!--                v-model="filterForm.region"-->
<!--                style="width:150px"-->
<!--                placeholder=""-->
<!--                @change="areaChangeHandler"-->
<!--              >-->
<!--                <el-option-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                  :key="item.value"-->
<!--                  v-for="(item) in codeOptions"-->
<!--                ></el-option>-->
<!--              </el-select>-->
            </el-form-item>
          </el-form>
        </div>
        <ul class="common-num-list">
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===0}"
            @click="numClickHandler(0)"
          >
            <div class="common-num-item-label">合计</div>
            <div class="common-num-item-num">
              <count-to :startVal="0" :endVal="mainNums.total" :decimals="0" :duration="2000"></count-to>
              <span class="common-num-unit">个</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===1}"
            @click="numClickHandler(1)"
          >
            <div class="common-num-item-label">基础部件</div>
            <div class="common-num-item-num">
              <count-to :startVal="0" :endVal="mainNums.basicParts" :duration="2000"></count-to>
              <span class="common-num-unit">个</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===2}"
            @click="numClickHandler(2)"
          >
            <div class="common-num-item-label">摄像头</div>
            <div class="common-num-item-num">
              <count-to :startVal="0" :endVal="mainNums.camera" :decimals="0" :duration="2000"></count-to>
              <span class="common-num-unit">个</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===3}"
            @click="numClickHandler(3)"
          >
            <div class="common-num-item-label">环境办</div>
            <div class="common-num-item-num">
              <count-to :startVal="0" :endVal="mainNums.environment" :duration="2000"></count-to>
              <span class="common-num-unit">个</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===4}"
            @click="numClickHandler(4)"
          >
            <div class="common-num-item-label">综治办</div>
            <div class="common-num-item-num">
              <count-to :startVal="0" :endVal="mainNums.political" :decimals="0" :duration="2000"></count-to>
              <span class="common-num-unit">个</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===5}"
            @click="numClickHandler(5)"
          >
            <div class="common-num-item-label">环保办</div>
            <div class="common-num-item-num">
              <count-to :startVal="0" :endVal="mainNums.Environmental" :duration="2000"></count-to>
              <span class="common-num-unit">个</span>
            </div>
          </li>
          <li
            class="common-num-item"
            :class="{active:activeNumIndex===6}"
            @click="numClickHandler(6)"
          >
            <div class="common-num-item-label">安全生产</div>
            <div class="common-num-item-num">
              <count-to
                :startVal="0"
                :endVal="mainNums.productionSafety"
                :decimals="0"
                :duration="2000"
              ></count-to>
              <span class="common-num-unit">个</span>
            </div>
          </li>
        </ul>
        <div class="barChartBox" ref="barChartBox"></div>
      </zm-box4>
    </div>
    <div
      v-loading="mapDataLoading"
      id="mapBox"
      :class="{ready:mapReady}"
      class="main-body-mapbox"
      style="height:100vh;width:100vw"
    ></div>
    <el-dialog title="摄像头信息"
               :visible.sync="dialogTableVisible"
               custom-class="el-dragable-dialog default-on-right sxt-table"
               :modal="false"
               :close-on-click-modal="false"
               v-el-drag-dialog
               top="490px"
               width="40%">

      <el-table :data="tableData" height="250" @row-click="tableLineClick">
        <el-table-column property="type" label="类型" width="150"></el-table-column>
        <el-table-column property="sq" label="社区" width="150"></el-table-column>
        <el-table-column property="title" label="位置"></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="部件信息"
               :visible.sync="bjdialogTableVisible"
               custom-class="el-dragable-dialog default-on-right sxt-table"
               :modal="false"
               :close-on-click-modal="false"
               v-el-drag-dialog
               top="490px"
               width="40%">

      <el-table :data="bjtableData" height="350" @row-click="tableLineClick">
        <el-table-column property="objname" label="名称" width="150"></el-table-column>
        <el-table-column property="comname" label="社区" width="150"></el-table-column>
        <el-table-column property="datasource" label="数据来源"></el-table-column>
        <el-table-column property="objstate" label="状态"></el-table-column>
      </el-table>
    </el-dialog>
  </zm-body>
</template>

<script>

/*
   功能模块  部件分析→已改为部件覆盖率
   创建人    zgf
   更新时间  2020/04/14
   备注
*/
let barNumArr=[],barTitleArr=[],sxtArr=[],sxtTitle=[]
let njcArr=[],sjdArr=[],xdlArr=[],ddlArr=[],xhhArr=[],dhhArr=[],bfxArr=[],nfxArr=[],djwArr=[],jgzArr=[],ljhArr=[]
let njcBjArr=[],sjdBjArr=[],xdlBjArr=[],ddlBjArr=[],xhhBjArr=[],dhhBjArr=[],bfxBjArr=[],nfxBjArr=[],djwBjArr=[],jgzBjArr=[],ljhBjArr=[]
let sq = ""
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
export default {
  name: "ComponentAnalysis",
  directives: { elDragDialog },
  data() {
    return {
      filterForm: {
        region: "",
        country: "",
        code: "",
      },
      areaOptions: [],
      countryOptions: [],
      codeOptions: [],
      mapReady: false,
      map: null,
      mapDataLoading: false,
      mainNums: {},
      areaDataLoading: false,
      barChartBox: null,

      actualAreaList: [],
      gridNumberList: [],
      gridAverageSizeList: [],
      responsibilityGridNumberList: [],
      responsibilityGridAverageSizeList: [],
      componentNumList: [],
      componentDensityList: [],
      areaLabelList: [],
      areaPositionList: [],
      activeNumIndex: 0,

      markersList: [],
      funCodeArr: [
        "actualAreaList",
        "gridNumberList",
        "gridAverageSizeList",
        "responsibilityGridNumberList",
        "responsibilityGridAverageSizeList",
        "componentNumList",
        "componentDensityList"
      ],
      funTitleArr: [
        "合计",
        "基础部件",
        "摄像头","环境办",
        "综治办",
        "环保办",
        "安全生产"
      ],
      caseList: [],
      nfxz: '南法信镇',
      dialogTableVisible: false,
      tableData: [],
      bjdialogTableVisible: false,
      bjtableData: []
    };
  },
  created(){
    let sq = ""
    this.getData(sq);
    this.getSxtData()
  },
  mounted() {
    this.$nextTick(() => {
      this.mapInit();
    });
    this.getPageBaseData();
  },
  methods: {
    tableLineClick(item){
    },
    mapInit() {
      const AMap = window.AMap;
      this.map = new AMap.Map("mapBox", {
        mapStyle: "amap://styles/a5f6e6bd157193151290059146ec5e9b", // 设置地图的显示样式
        //viewMode: "3D",
        turboMode: true,
        defaultCursor: "pointer",
        showBuildingBlock: true,
        expandZoomRange: true,
        zooms: [3, 20],
        zoom: 14,
        pitch: 60,
        center: [116.590346,40.14045],
        forceVector: true
      });
      let uUrl = this.baseUrl.WgUrl;
      var wms = new AMap.TileLayer.WMS({
        url: uUrl, // wms服务的url地址
        blend: false, // 地图级别切换时，不同级别的图片是否进行混合
        tileSize: 512, // 加载WMS图层服务时，图片的分片大小
        params: {
          styles:'default',
          'LAYERS': '0',
          VERSION:'1.3.0'
        } // OGC标准的WMS地图服务的GetMap接口的参数
      });

      wms.setMap(this.map);
      setTimeout(() => {
        this.mapReady = true;
      }, 1000);
    },
    //批量添加点
    addPointsListToMap() {
      this.removeMapMarkers();
      for (var i=0;i<this.caseList.length;i++) {
        let item = this.caseList[i];
        this.addMarkerToMap(item, i);
      }
    },
    //在地图上添加标注点
    addMarkerToMap(obj) {
      if(!obj.position){
        return false
      }
      let self = this;
      let AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      // let markerContent = `<div class="map-icon-marker" style="width: 10em">
      //                 <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i></div>
      //                       <div class="map-icon-marker__label">
      //                   ${obj.title}
      //              </div>
      //             </div>`;
      //
      let position = new AMap.LngLat(obj.position[0], obj.position[1]);
      let markerAll = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        icon: 'images/video-nomal.png',
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(-16, -32),
        zooms: [10,20]
      });
      this.markersList.push(markerAll);
      // 将 markers 添加到地图
      this.map.add(markerAll);
      AMap.event.addListener(markerAll, 'click', function(e) {
        self.onallshowvideo = true
      })
    },
    //页面里需要的一些基础数据获取
    getPageBaseData(callBack) {
      setTimeout(() => {
        this.areaOptions = [
          { value: "0001", label: "南法信镇" }
        ];
        this.countryOptions = [
          { value: "0001", label: "全镇" },
          { value: "0002", label: "南卷村" },
          { value: "0003", label: "三家店村" },
          { value: "0004", label: "西杜兰村" },
          { value: "0005", label: "东杜兰村" },
          { value: "0006", label: "西海洪村" },
          { value: "0007", label: "东海洪村" },
          { value: "0008", label: "北法信村" },
          { value: "0009", label: "南法信村" },
          { value: "0010", label: "大江洼村" },
          { value: "0011", label: "焦各庄村" },
          { value: "0012", label: "刘家河村" }
        ];
        this.codeOptions = [
          { value: "0001", label: "选择网格" },
          { value: "0002", label: "1102225554445" },
          { value: "0003", label: "1102225554441" },
          { value: "0004", label: "1102225554442" },
          { value: "0005", label: "1102225554443" },
          { value: "0006", label: "1102225554444" }
        ];
        this.filterForm.region = this.areaOptions[0].value;
        if (callBack) callBack();
      }, 100);
    },
    //镇切换
    areaChangeHandler() {
      let sq = ""
      sq = this.countryOptions.find((obj)=>{return obj.value == this.filterForm.region}).label
      if('全镇' == sq){
        sq = ''
      }
      this.getData(sq);
      switch (sq) {
        case "南卷村":
          this.sxtaddPointsListToMap(njcArr)
          this.map.setCenter([116.613715,40.150242])
          break;
        case "三家店村":
          this.sxtaddPointsListToMap(sjdArr)
          this.map.setCenter([116.606127,40.147346])
          break;
        case "西杜兰村":
          this.sxtaddPointsListToMap(xdlArr)
          this.map.setCenter([116.59209,40.145506])
          break;
        case "东杜兰村":
          this.sxtaddPointsListToMap(ddlArr)
          this.map.setCenter([116.600844,40.147006])

          break;
        case "西海洪村":
          this.sxtaddPointsListToMap(xhhArr)
          this.map.setCenter([116.611487,40.144768])

          break;
        case "东海洪村":
          this.sxtaddPointsListToMap(dhhArr)
          this.map.setCenter([116.617496,40.142553])
          break;
        case "北法信村":
          this.sxtaddPointsListToMap(bfxArr)
          this.map.setCenter([116.606772,40.136852])
          break;
        case "南法信村":
          this.sxtaddPointsListToMap(nfxArr)
          this.map.setCenter([116.606229,40.118492])
          break;
        case "大江洼村":
          this.sxtaddPointsListToMap(djwArr)
          this.map.setCenter([116.594192,40.133955])
          break;
        case "焦各庄村":
          this.sxtaddPointsListToMap(jgzArr)
          this.map.setCenter([116.601192,40.132959])
          break;
        case "刘家河村":
          this.sxtaddPointsListToMap(ljhArr)
          this.map.setCenter([116.606235,40.129005])
          break;
      }
      // this.sxtaddPointsListToMap()
    },
    //在地图上添加标注点
    // addMarkerToMap(obj) {
    //   const self = this;
    //   const AMap = window.AMap;
    //   // 点标记显示内容，HTML要素字符串
    //   var markerContent = `<div class="map-icon-marker" style="width:${obj.areaName
    //     .length +
    //     (obj.data + "").length +
    //     2}em">
    //       <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i></div>
    //       <div class="map-icon-marker__label">
    //         ${obj.areaName}：${obj.data}
    //       </div>
    //   </div>`;
    //   var position = new AMap.LngLat(obj.position[0], obj.position[1]);
    //   var marker = new AMap.Marker({
    //     position: position,
    //     // 将 html 传给 content
    //     content: markerContent,
    //     // 以 icon 的 [center bottom] 为原点
    //     offset: new AMap.Pixel(2, -70)
    //   });
    //   this.markersList.push(marker);
    //   // 将 markers 添加到地图
    //   self.map.add(marker);
    // },
    removeMapMarkers() {
      if(this.markersList){
        this.map.remove(this.markersList);
      }

    },
    barChartInit(data, xLabels, title) {
      this.barChartBox = this.$echarts.init(this.$refs.barChartBox);
      this.barChartBox.off('click') // 这里很重要！！解决重复点击
      this.barChartBox.setOption({
        legend: {
          show: false
        },
        tooltip: {},
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "5%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 12,
            rotate: 60,
            textStyle: {
              color: "#01AAFF"
            }
          },
          data: xLabels
        },
        yAxis: {
          axisLine: {
            show: false,
            onZero: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: ["#381F8C"]
            }
          },
          axisLabel: {
            show: true,
            fontSize: 10,
            textStyle: {
              color: "#01AAFF"
            }
          }
        },
        series: [
          {
            type: "bar",
            barWidth: "10px",
            name: title,
            itemStyle: {
              normal: {
                color: "#0272F8"
              }
            },
            data: data
          }
        ]
      });
      let sq = ""
      sq = this.countryOptions.find((obj)=>{return obj.value == this.filterForm.region}).label
      if(sq != '全镇'){
        
          let sq = this.countryOptions.find((obj)=>{return obj.value == this.filterForm.region}).label
        this.barChartBox.on('click', (p) => {
          if(title =='摄像头' || title=='合计'){
            return false;
          }
          this.$http.get(this.baseUrl.clickBarUrl, {
            params: {
              name_cun: sq,
              name_bujian: p.name
            }
            
          }).then((r)=>{
            debugger
            this.bjtableData = r
          })
          this.bjdialogTableVisible = true
        })
      }
    },
    //数字点击
    numClickHandler(index) {
      this.activeNumIndex = index;
      switch (index) {
        case 0:
          this.getSxtData()
          this.barChartInit(barNumArr, barTitleArr, "合计");
          break;
        case 1:
          this.dialogTableVisible = false
          this.barChartInit(barNumArr, barTitleArr, "基础部件");
          this.caseList = [
            { id: 1, title: "西杜兰村", code: 3082, position: [116.59502580648707, 40.14697789849136] },
            { id: 2, title: "三家店村", code: 2486, position: [116.61262110795957,40.14993015449165] },
            { id: 3, title: "南卷村", code: 3347, position: [116.62446575430846,40.15399759618978] },
            { id: 4, title: "东杜兰村", code: 1228, position: [116.6050894529534,40.14615773975543] },
            { id: 5, title: "西海洪村", code: 1960, position: [116.62000247481868,40.145600089333314] },
            { id: 6, title: "东海洪村", code: 4360, position: [116.62369320316401,40.1410072132005] },
            { id: 7, title: "北法信村", code: 4596, position: [116.61360808696237,40.13736554348905] },
            { id: 8, title: "大江洼村", code: 891, position: [116.59880232394205,40.135495461869105] },
            { id: 9, title: "焦各庄村", code: 2005, position: [116.60794331077992,40.13277217936702] },
            { id: 10, title: "刘家河村", code: 3950, position: [116.61189149628572,40.12830969412716] },
            { id: 11, title: "南法信村", code: 13065, position: [116.60880165103403,40.11908859518438] }
          ];

          sq = this.countryOptions.find((obj)=>{return obj.value == this.filterForm.region}).label
          if('全镇' == sq){
            sq = ''
            this.tableData = [...njcBjArr, ...sjdBjArr, ...xdlBjArr, ...ddlBjArr, ...xhhBjArr, ...dhhBjArr, ...bfxBjArr, ...nfxBjArr, ...djwBjArr, ...jgzBjArr, ...ljhBjArr]
            this.map.setCenter([116.604915,40.138216])
            this.map.setZoom(15)
            this.addBjPointsListToMap()
          }else {
            switch (sq) {
              case "南卷村":
                this.tableData = njcBjArr
                this.caseList = [
                  { id: 3, title: "南卷村", code: 3347, position: [116.62446575430846,40.15399759618978] },
                ];
                break;
              case "三家店村":
                this.tableData = sjdBjArr
                this.caseList = [
                  { id: 2, title: "三家店村", code: 2486, position: [116.61262110795957,40.14993015449165] }
                ];
                break;
              case "西杜兰村":
                this.tableData = xdlBjArr
                this.caseList = [
                  { id: 1, title: "西杜兰村", code: 3082, position: [116.59502580648707, 40.14697789849136] }
                ];
                break;
              case "东杜兰村":
                this.tableData = ddlBjArr
                this.caseList = [
                  { id: 4, title: "东杜兰村", code: 1228, position: [116.6050894529534, 40.14615773975543] },
                ];
                break;
              case "西海洪村":
                this.tableData = xhhBjArr
                this.caseList = [
                  { id: 5, title: "西海洪村", code: 1960, position: [116.62000247481868, 40.145600089333314] },
                ];
                break;
              case "东海洪村":
                this.tableData = dhhBjArr
                this.caseList = [
                  { id: 6, title: "东海洪村", code: 4360, position: [116.62369320316401, 40.1410072132005] },
                ];
                break;
              case "北法信村":
                this.tableData = bfxBjArr
                this.caseList = [
                  { id: 7, title: "北法信村", code: 4596, position: [116.61360808696237, 40.13736554348905] },
                ];
                break;
              case "南法信村":
                this.tableData = nfxBjArr
                this.caseList = [
                  { id: 11, title: "南法信村", code: 13065, position: [116.60880165103403, 40.11908859518438] }
                ];
                break;
              case "大江洼村":
                this.tableData = djwBjArr
                this.caseList = [
                  { id: 8, title: "大江洼村", code: 891, position: [116.59880232394205, 40.135495461869105] }
                ];
                break;
              case "焦各庄村":
                this.tableData = jgzBjArr
                this.caseList = [
                  { id: 9, title: "焦各庄村", code: 2005, position: [116.60794331077992, 40.13277217936702] }
                ];
                break;
              case "刘家河村":
                this.tableData = ljhBjArr
                this.caseList = [
                  { id: 10, title: "刘家河村", code: 3950, position: [116.61189149628572, 40.12830969412716] },
                ];
                break;
            }
            this.map.setCenter(this.caseList.position)
            this.map.setZoom(15)
            this.addBjPointsListToMap()
          }
          break;
        case 2:
          this.barChartInit(sxtArr, sxtTitle, "摄像头");
          this.caseList = [
            { id: 1, title: "西杜兰村", code: 54, position: [116.59502580648707, 40.14697789849136] },
            { id: 2, title: "三家店村", code: 30, position: [116.61262110795957,40.14993015449165] },
            { id: 3, title: "南卷村", code: 42, position: [116.62446575430846,40.15399759618978] },
            { id: 4, title: "东杜兰村", code: 26, position: [116.6050894529534,40.14615773975543] },
            { id: 5, title: "西海洪村", code: 41, position: [116.62000247481868,40.145600089333314] },
            { id: 6, title: "东海洪村", code: 79, position: [116.62369320316401,40.1410072132005] },
            { id: 7, title: "北法信村", code: 83, position: [116.61360808696237,40.13736554348905] },
            { id: 8, title: "大江洼村", code: 21, position: [116.59880232394205,40.135495461869105] },
            { id: 9, title: "焦各庄村", code: 61, position: [116.60794331077992,40.13277217936702] },
            { id: 10, title: "刘家河村", code: 11, position: [116.61189149628572,40.12830969412716] },
            { id: 11, title: "南法信村", code: 30, position: [116.60880165103403,40.11908859518438] }
          ];
          sq = this.countryOptions.find((obj)=>{return obj.value == this.filterForm.region}).label
          if('全镇' == sq){
            sq = ''
            this.tableData = [...nfxArr, ...sjdArr, ...xdlArr, ...ddlArr, ...xhhArr, ...dhhArr, ...bfxArr, ...nfxArr, ...djwArr, ...jgzArr, ...ljhArr]
            this.map.setCenter([116.604915,40.138216])
            this.map.setZoom(15)
            this.addBjPointsListToMap()
          }else{
            switch (sq) {
              case "南卷村":
                this.tableData = njcArr
                this.caseList = [
                  { id: 3, title: "南卷村", code: 42, position: [116.62446575430846, 40.15399759618978] },
                ];
                break;
              case "三家店村":
                this.tableData = sjdArr
                this.caseList = [
                  { id: 2, title: "三家店村", code: 30, position: [116.61262110795957, 40.14993015449165] },
                ];
                break;
              case "西杜兰村":
                this.tableData = xdlArr
                this.caseList = [
                  { id: 1, title: "西杜兰村", code: 54, position: [116.59502580648707, 40.14697789849136] },
                ];
                break;
              case "东杜兰村":
                this.tableData = ddlArr
                this.caseList = [
                  { id: 4, title: "东杜兰村", code: 26, position: [116.6050894529534, 40.14615773975543] },
                ];
                break;
              case "西海洪村":
                this.tableData = xhhArr
                this.caseList = [
                  { id: 5, title: "西海洪村", code: 41, position: [116.62000247481868, 40.145600089333314] },
                ];
                break;
              case "东海洪村":
                this.tableData = dhhArr
                this.caseList = [
                  { id: 6, title: "东海洪村", code: 79, position: [116.62369320316401, 40.1410072132005] },
                ];
                break;
              case "北法信村":
                this.tableData = bfxArr 
                this.caseList = [
                  { id: 7, title: "北法信村", code: 83, position: [116.61360808696237, 40.13736554348905] },
                ];
                break;
              case "南法信村":
                this.tableData = nfxArr
                this.caseList = [
                  { id: 11, title: "南法信村", code: 30, position: [116.60880165103403, 40.11908859518438] }
                ];
                break;
              case "大江洼村":
                this.tableData = djwArr
                this.caseList = [
                  { id: 8, title: "大江洼村", code: 21, position: [116.59880232394205, 40.135495461869105] },
                ];
                break;
              case "焦各庄村":
                this.tableData = jgzArr
                this.caseList = [
                  { id: 9, title: "焦各庄村", code: 61, position: [116.60794331077992, 40.13277217936702] },
                ];
                break;
              case "刘家河村":
                this.tableData = ljhArr
                this.caseList = [
                  { id: 10, title: "刘家河村", code: 11, position: [116.61189149628572, 40.12830969412716] },
                ];
                break;
            }
            this.map.setCenter(this.caseList.position)
            this.map.setZoom(15)
            //this.addBjPointsListToMap()
          }
          this.dialogTableVisible = true
          break;
        case 3:
          break;
        case 4:
          break;
        case 5:
          break;
        case 6:
          break;
      }
      // this.getMapData(index)
    },
    //获取数据
    getData(sq){
      barNumArr=[],barTitleArr=[],sxtArr=[],sxtTitle=[]
      this.$http.get(this.baseUrl.bjtj, {
        params: {
          sq: sq
        }
      }).then((rel)=>{
        this.mainNums = {
          total: rel.data.zs, //合计
          basicParts: rel.data.bjzs, //基础部件
          camera: rel.data.sxtzs, //摄像头
          environment: 0, //环境办
          political: 0, //综治办
          Environmental: 0, //环保办
          productionSafety: 0 //安全生产
        };
        barNumArr=[],barTitleArr=[]
        for(let i=0;i<rel.data.bjdata.length;i++){
          barNumArr.push(rel.data.bjdata[i].SL)
          barTitleArr.push(rel.data.bjdata[i].COMNAME)
        }
        for (let i=0;i<rel.data.sxtdata.length;i++){
          sxtArr.push(rel.data.sxtdata[i].SL)
          sxtTitle.push(rel.data.sxtdata[i].COMNAME)
        }

        // this.addPointsListToMap()
        if(sq == ''){
          this.barChartInit(barNumArr, barTitleArr, "合计");
        }else{
          barNumArr=[];barTitleArr=[];
          this.$http.get(this.baseUrl.changeCun, {
            params: {
              name: sq
            }
          }).then((res)=>{
            debugger
            if(res){
              for(let aa=0;aa<res.length;aa++){
                barTitleArr.push(res[aa].name)
                barNumArr.push(res[aa].sl)
              }
              this.barChartInit(barNumArr, barTitleArr, sq);
            }
          })

        }
        this.areaDataLoading = false;
      })
    },
    getSxtData(){
      this.$http.get(this.baseUrl.sxt, {
      }).then((rel)=>{
        let oo,ooo;
        njcArr=[],sjdArr=[],xdlArr=[],ddlArr=[],xhhArr=[],dhhArr=[],bfxArr=[],nfxArr=[],djwArr=[],jgzArr=[],ljhArr=[]
        for(let i=0;i<rel.data.length;i++){
          oo = this.LonLat2Mercator(rel.data[i].X, rel.data[i].Y)
          ooo  = this.Mercator2LonLat(oo.x, oo.y)
          this.caseList.push(
                  {
                    id: i+1,
                    title: rel.data[i].NAME,
                    img: "",
                    code: rel.data[i].ONEBYONE,
                    type: rel.data[i].DIRECTION,
                    position: [rel.data[i].X, rel.data[i].Y],
                  })
          switch (rel.data[i].SQ) {
            case "南卷村":
              njcArr.push({
                        id: i+1,
                        title: rel.data[i].NAME,
                        img: "",
                        code: rel.data[i].ONEBYONE,
                        type: rel.data[i].DIRECTION,
                        position: [ooo.x, ooo.y],
                        model: rel.data[i].MODEL,
                        sq: rel.data[i].SQ
                      })
                break;
            case "三家店村":
              sjdArr.push({
                id: i+1,
                title: rel.data[i].NAME,
                img: "",
                code: rel.data[i].ONEBYONE,
                type: rel.data[i].DIRECTION,
                position: [ooo.x, ooo.y],
                model: rel.data[i].MODEL,
                sq: rel.data[i].SQ
              })
              break;
            case "西杜兰村":
              xdlArr.push({
              id: i+1,
              title: rel.data[i].NAME,
              img: "",
              code: rel.data[i].ONEBYONE,
              type: rel.data[i].DIRECTION,
              position: [ooo.x, ooo.y],
              model: rel.data[i].MODEL,
              sq: rel.data[i].SQ
            })
              break;
            case "东杜兰村":
              ddlArr.push({
              id: i+1,
              title: rel.data[i].NAME,
              img: "",
              code: rel.data[i].ONEBYONE,
              type: rel.data[i].DIRECTION,
              position: [ooo.x, ooo.y],
              model: rel.data[i].MODEL,
              sq: rel.data[i].SQ
            })
              break;
            case "西海洪村":
              xhhArr.push({
              id: i+1,
              title: rel.data[i].NAME,
              img: "",
              code: rel.data[i].ONEBYONE,
              type: rel.data[i].DIRECTION,
              position: [ooo.x, ooo.y],
              model: rel.data[i].MODEL,
              sq: rel.data[i].SQ
            })
              break;
            case "东海洪村":
              dhhArr.push({
              id: i+1,
              title: rel.data[i].NAME,
              img: "",
              code: rel.data[i].ONEBYONE,
              type: rel.data[i].DIRECTION,
              position: [ooo.x, ooo.y],
              model: rel.data[i].MODEL,
              sq: rel.data[i].SQ
            })
              break;
            case "北法信村":
              bfxArr.push({
              id: i+1,
              title: rel.data[i].NAME,
              img: "",
              code: rel.data[i].ONEBYONE,
              type: rel.data[i].DIRECTION,
              position: [ooo.x, ooo.y],
              model: rel.data[i].MODEL,
              sq: rel.data[i].SQ
            })
              break;
            case "南法信村":
              nfxArr.push({
              id: i+1,
              title: rel.data[i].NAME,
              img: "",
              code: rel.data[i].ONEBYONE,
              type: rel.data[i].DIRECTION,
              position: [ooo.x, ooo.y],
              model: rel.data[i].MODEL,
              sq: rel.data[i].SQ
            })
              break;
            case "大江洼村":
              djwArr.push({
              id: i+1,
              title: rel.data[i].NAME,
              img: "",
              code: rel.data[i].ONEBYONE,
              type: rel.data[i].DIRECTION,
              position: [ooo.x, ooo.y],
              model: rel.data[i].MODEL,
              sq: rel.data[i].SQ
            })
              break;
            case "焦各庄村":
              jgzArr.push({
              id: i+1,
              title: rel.data[i].NAME,
              img: "",
              code: rel.data[i].ONEBYONE,
              type: rel.data[i].DIRECTION,
                position: [ooo.x, ooo.y],
              model: rel.data[i].MODEL,
              sq: rel.data[i].SQ
            })
              break;
            case "刘家河村":
              ljhArr.push({
              id: i+1,
              title: rel.data[i].NAME,
              img: "",
              code: rel.data[i].ONEBYONE,
              type: rel.data[i].DIRECTION,
              position: [ooo.x, ooo.y],
              model: rel.data[i].MODEL,
              sq: rel.data[i].SQ
            })
              break;
            default:
              break;
          }
        }
      })
    },
    //批量添加点
    sxtaddPointsListToMap(arr) {
      this.removeMapMarkers();
      for (var i in arr) {
        let item = arr[i];
        this.addMarkerToMap(item, i);
      }
    },
    //在地图上添加标注点
    sxtaddMarkerToMap(obj) {
      let self = this;
      let AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      let markerContent = `<div class="map-icon-marker" style="width: 10em">
                      <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i></div>
                            <div class="map-icon-marker__label">
                        ${obj.title}
                   </div>
                  </div>`;
      //
      let position = new AMap.LngLat(obj.position[0], obj.position[1]);
      let markerAll = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        // content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        icon: 'images/video-nomal.png',
        title: obj.title,
        offset: new AMap.Pixel(-32, -64),
        zooms: [16,20]
      });
      this.markersList.push(markerAll);
      // 将 markers 添加到地图
      this.map.add(markerAll);
      AMap.event.addListener(markerAll, 'click', function(e) {
        self.onallshowvideo = true
      })
      AMap.event.addListener(markerAll, 'mouseover', function(e) {

      })
    },
    //批量添加点
    addBjPointsListToMap() {
      this.removeMapMarkers();
      for (var i in this.caseList) {
        let item = this.caseList[i];
        this.addBjMarkerToMap(item, i);
      }
    },
    //在地图上添加标注点
    addBjMarkerToMap(obj) {
      let self = this;
      let AMap = window.AMap;
      // 点标记显示内容，HTML要素字符串
      let markerContent = `<div class="map-icon-marker" style="width: 10em">
                      <div class="map-icon-marker__icon"><i class="iconfont icon-star"></i></div>
                            <div class="map-icon-marker__label">
                        ${obj.title} ${obj.code} 个
                   </div>
                  </div>`;
      //
      let position = new AMap.LngLat(obj.position[0], obj.position[1]);
      let markerAll = new AMap.Marker({
        position: position,
        // 将 html 传给 content
        // icon: 'images/bujian.png',
        content: markerContent,
        // 以 icon 的 [center bottom] 为原点
        offset: new AMap.Pixel(2, -70),
        zooms: [15,20]
      });
      this.markersList.push(markerAll);
      // 将 markers 添加到地图
      this.map.add(markerAll);
      AMap.event.addListener(markerAll, 'click', function(e) {
        self.onallshowvideo = true
      })
    },
    LonLat2Mercator(lon, lat){
      var earthRad = 6378137.0;
      var x = ((lon * Math.PI) / 180) * earthRad + 655.69;
      var y = (lat * Math.PI) / 180;
      y = (earthRad / 2) * Math.log((1.0 + Math.sin(y)) / (1.0 - Math.sin(y))) + 152.69;
      return {x: x,y:y}
    },
    Mercator2LonLat(lon, lat){
      var x = lon/20037508.34*180;
      var mmy = lat/20037508.34*180;
      var y= 180/Math.PI*(2*Math.atan(Math.exp(mmy*Math.PI/180))-Math.PI/2);
      return {x: x,y:y}
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../css/mixin.less";
.overlay-container {
  display: flex;
  position: absolute;
  z-index: 20;
  top: 1rem;
  left: 1rem;
  width: 36rem;
  flex-direction: column;
  height: calc(100% - 2rem);
  .zm-box4 {
    justify-content: space-between;
    flex: 1;
  }
}
.barChartBox {
  height: calc(100vh - 23rem);
  margin-top: 0.5rem;
}
  .sxt-table{
    z-index: 30;
    position: fixed !important;
    right: 20px !important;
    bottom: 50px;
  }
.el-dragable-dialog{
  position: fixed !important;
  &.el-dialog{
    width: 100%;
    margin-left: -180px;
    left: 50%;
    margin-top: 0;
    top: 4rem;
    .el-dialog__body{
      max-height: calc(100vh - 5rem - 100px);
      overflow-y: auto;
      .nativeScroll()
    }
  }
  &.default-on-right{
    &.el-dialog{
      left: auto;
      right: 20px;
    }
  }
}
</style>
